<template>
	<view class="fixed_bg">
		<view class="picture_box">
			<image class="home_tit" mode="heightFix" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7eb8801a-b901-47ec-8254-367768ecf441/6ca0484e-3fa6-4ccd-9982-67d0e2546d1a.webp"></image>
			<image class="page_bg" mode="aspectFill" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7eb8801a-b901-47ec-8254-367768ecf441/8f53d471-ef0d-48ee-8b97-6fb9f2aa0fa9.jpg"></image>
			<view class="name_box">
				<view class="name_box_bg">
					<image class="name_bg" mode="heightFix" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7eb8801a-b901-47ec-8254-367768ecf441/42f8f83f-b3ed-481c-b97b-0a576ebb4c20.webp"></image>
					<image class="ring" mode="heightFix" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7eb8801a-b901-47ec-8254-367768ecf441/cd8073d2-5d00-4229-9f8a-739aa18386f8.webp"></image>
					<view class="name_up">
						<text>Mr.李绍辉</text>
						<text>Ms.胡媛倩</text>
					</view>
				</view>
			</view>
			<!-- 图片部分 -->
			<view class="picture_bg">
				<image class="picture" mode="aspectFill" :src="imgUrl"></image>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	const imgUrl: String = ref('')
	const fileList = uni.getStorageSync('fileList')
	console.log('页面内',fileList)
	imgUrl.value = fileList[0].url
</script>

<style lang="scss" scoped>
	.picture_box {
		position: relative;
		.page_bg {
			width: 100vw;
			height: 100vh;
			animation: bigToSmall 2s linear;
			animation-fill-mode:forwards;
			@keyframes bigToSmall {
				0% {
					transform: scale(1.2);
				}
				100% {
					transform: scale(1);
				}
			}
		}
		.home_tit {
			position: absolute;
			top: 18vh;
			left: 50%;
			transform: translateX(-50%);
			height: 150rpx;
			z-index: 1;
			animation: homeTit 1s linear;
			@keyframes homeTit {
				0% {
					opacity: 0;
					transform: translateX(-50%) scale(0.5);
				}
				100% {
					opacity: 1;
					transform: translateX(-50%) scale(1);
				}
			}
		}
		.name_box {
			position: absolute;
			top: calc(18vh + 170rpx);
			left: 50%;
			transform: translateX(-50%);
			z-index: 1;
			.name_box_bg {
				position: relative;
				height: 50rpx;
				.name_bg {
					height: 50rpx;
					animation: nameBg 1s linear;
					@keyframes nameBg {
						0% {
							opacity: 0;
							transform: scale(0.5);
						}
						100% {
							opacity: 1;
							transform: scale(1);
						}
					}
				}
				.ring {
					position: absolute;
					left: calc(50% - 65rpx/2);
					top: -10rpx;
					height: 65rpx;
					animation: ringAnimat 1s linear;
					animation-delay: 2s;
					@keyframes ringAnimat {
						0% {
							transform: rotateZ(0deg);
						}
						20% {
							transform: rotateZ(10deg);
						}
						40% {
							transform: rotateZ(-10deg);
						}
						60% {
							transform: rotateZ(10deg);
						}
						80% {
							transform: rotateZ(-10deg);
						}
						100% {
							transform: rotateZ(0deg);
						}
					}
				}
				.name_up {
					position: absolute;
					left: 50%;
					top: 50%;
					width: 100%;
					transform: translate(-50%,-50%);
					display: flex;
					text-align: center;
					color: #fff;
					font-size: 24rpx;
					text {
						flex: 1;
						&:nth-child(1) {
							animation: nameMr 2s linear;
						}
						@keyframes nameMr {
							0% {
								transform: translateX(80rpx);
								opacity: 0;
							}
							50% {
								transform: translateX(40rpx);
								opacity: .8;
							}
							100% {
								transform: translateX(0);
								opacity: 1;
							}
						}
						&:nth-child(2) {
							animation: nameMs 2s linear;
						}
						@keyframes nameMs {
							0% {
								transform: translateX(-80rpx);
								opacity: 0;
							}
							50% {
								transform: translateX(-40rpx);
								opacity: .8;
							}
							100% {
								transform: translateX(0);
								opacity: 1;
							}
						}
					}
				}
			}
		}
		.picture_bg {
			position: fixed;
			bottom: 18vh;
			left: 50%;
			transform: translateX(calc(-50%));
			background-color: #fff;
			width: 70vw;
			height: 45vh;
			padding: 15rpx;
			animation: pictureMs 2s linear;
			@keyframes pictureMs {
				0% {
					transform: translateX(calc(-50%)) scale(1.2);
					opacity: .5;
				}
				100% {
					transform: translateX(calc(-50%)) scale(1);
					opacity: 1;
				}
			}
			.picture {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>